<template>
	<view class="video-learn-view">
		<view class="learn-title">请完成视频学习后答题</view>
		<!-- :controls="false" -->
		<video :src="videoUrl" :style="'width: 100%;height:' +getHeight+'px;'" :controls="false" show-play-btn
			object-fit="fill" show-center-play-btn :initial-time="duration" :enable-progress-gesture="false"
			enable-play-gesture class="learn-video" @timeupdate="timeupdate" @ended="videoEnd"></video>
		<view class="learn-tip">正在学习：{{name}}</view>
		<view class="main-basic-btn">
			<van-button block color="#4078E5" :disabled="!isEnd" @click="toAnswer">开始答题
				{{isEnd ? '' : time}}</van-button>
		</view>
	</view>
</template>

<script>
	let screenWidth = uni.getWindowInfo().screenWidth
	export default {
		data() {
			return {
				isEnd: false,
				name: '', //视频名称
				videoUrl: '', //视频地址
				time: '', //视频时长
				duration: 0, //视频秒数
				total_sec: 0, //总秒数
				pid: '', //项目id
				lid: '', //课程id
				isLast: false, //是否为最后一次练题
			};
		},
		onLoad(e) {
			if (e.pid) {
				this.pid = e.pid
			}
			if (e.id) {
				this.lid = e.id
			}
			if (e.isLast) {
				this.isLast = (e.isLast == 'true' ? true : false)
			}
			this.getInfo()
		},
		onUnload() {
			this.updateStudy()
		},
		computed: {
			// 视频15:9的比例
			getHeight() {
				let rate = (Number(screenWidth) - 32) / 16
				return parseInt(rate * 9)
			}
		},
		methods: {
			// 获取学习视频信息
			getInfo() {
				this.$api.requst('/gwc/projects/lesson', {
					lesson_id: this.lid,
					project_id: this.pid
				}).then((res) => {
					this.videoUrl = res.data.file_url
					this.name = res.data.name
					this.total_sec = res.data.vod_length
					this.duration = res.data.progress

					if (res.data.is_done) {
						this.isEnd = true
					} else if (this.duration < res.data.vod_length) {
						this.isEnd = false
					}
					this.time = this.toHMS(this.total_sec - this.duration)
					this.updateStudy()
				})
			},
			// 秒数转化为时分秒
			toHMS(totalSec) {
				const h = Math.floor(totalSec / 3600) % 24;
				const m = Math.floor((totalSec % 3600) / 60);
				const s = totalSec % 60;
				// 补零
				return [h, m, s].map(v => String(v).padStart(2, '0')).join(':');
			},
			// 更新学习进度
			updateStudy(type) {
				this.$api.requst('/gwc/projects/lesson/study', {
					lesson_id: this.lid,
					project_id: this.pid,
					progress: this.duration
				}, 'POST').then((res) => {
					this.info = res.data
					console.log('更新', type, this.duration)
					if (type === 'end') {
						this.isEnd = true
					}
				})
			},
			// 视频播放结束
			videoEnd(e) {
				this.duration = this.total_sec
				this.updateStudy('end')
			},
			// 监听播放
			timeupdate(e) {
				this.duration = parseInt(e.detail.currentTime)
				this.time = this.toHMS(this.total_sec - this.duration)
			},
			toAnswer() {
				uni.redirectTo({
					url: '/pages/workbench/trainCourse/answer/answer?pid=' + this.pid + '&id=' + this.lid +
						'&isLast=' + this.isLast
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-learn-view {
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding: 16px;

		.learn-title {
			font-size: 34rpx;
		}

		.learn-video {
			margin-top: 32rpx;
			// height: 386rpx;
			// width: 100%;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}

		.learn-tip {
			color: #5C5F66;
			margin-top: 36rpx;
		}
	}
</style>